<template>
	
	<aside class="info">
		<h1>
			<a>用户积分:<b class="so">{{score}}</b></a>
			<a class="zfb-cz-btn" @click="$emit('update:model-value', true)">支付宝积分充值</a>
		</h1>
		<!-- 图表形式显示积分  -->
		<div id="user-score-mark" class="u-mark"></div>
	</aside>
	
</template>

<script>
import * as echarts from 'echarts';
export default {
	props: {
		score: {
			type: Number, 
			required: true , 
		}, 
		scoreDetails : {
			type: Array, 
			required: true , 
		},
		modelValue: {
			type: Boolean,
			required: false, 
			default: false 
		}
	},
	emits: ["update:model-value"],
	mounted(){
		echarts.init(document.getElementById('user-score-mark')).setOption({
			title: {
				text: '用户积分信息-积分统计',
				left: 'center'
			},
			tooltip: {
				trigger: 'item',
				formatter: '{a} <br/>{b} : {c} ({d}%)'
			},
			legend: {
				top: 'bottom',
				data: this.scoreDetails.map(sd => sd.name) 
			},
			series: [
				{
					name: '积分来源',
					type: 'pie',
					radius: '50%',
					center: ['40%', '45%'],
					data: this.scoreDetails,
					emphasis: {
						itemStyle: {
							shadowBlur: 10,
							shadowOffsetX: 0,
							shadowColor: 'rgba(0, 0, 0, 0.5)'
						}
					}
				}
			]
		})	
	}
}	
</script>

<style>
</style>